import React, { Component } from "react";
import { Container } from "./style";

import { Button } from "antd";
import {  AudioOutlined } from "@ant-design/icons";

import { Input } from "antd";
import { DatePicker, Space, Select, Table ,Typography } from "antd";
import "antd/dist/antd.css"; // or 'antd/dist/antd.less'
// 中文
import { ConfigProvider } from "antd";
import zhCN from "antd/lib/locale/zh_CN";
import moment from "moment";
import "moment/locale/zh-cn";
moment.locale("zh-cn");

const { Option } = Select;
const { Column, ColumnGroup } = Table;
const { Search } = Input;
const { RangePicker } = DatePicker;
const { Text } = Typography;
const suffix = (
  <AudioOutlined
    style={{
      fontSize: 16,
      color: "#1890ff",
    }}
  />
);
const columns = [
  {
    title: "序号",
    dataIndex: "id",
    key: "id",
    align: "center",
  },
  {
    title: "物品名称",
    dataIndex: "name",
    key: "name",
    align: "center",
  },
  {
    title: "物品编码",
    dataIndex: "number",
    key: "number",
    align: "center",
  },
  {
    title: "物品分类",
    dataIndex: "type",
    key: "type",
    align: "center",
  },
  {
    title: "品牌",
    dataIndex: "brand",
    key: "brand",
    align: "center",
  },
  {
    title: "规格/型号",
    dataIndex: "model",
    key: "model",
    align: "center",
  },
  {
    title: "单位",
    dataIndex: "Company",
    key: "Company",
    align: "center",
  },
  {
    title: "当前库存",
    dataIndex: "current",
    key: "current",
    align: "center",
  },
  {
    title: "入库数量",
    dataIndex: "StorageQuantity",
    key: "StorageQuantity",
    align: "center",
  },
  {
    title: "价格",
    dataIndex: "price",
    key: "price",
    align: "center",
  },
  {
    title: "购买人",
    dataIndex: "Buyer",
    key: "Buyer",
    align: "center",
  },
  {
    title: "金额",
    dataIndex: "tags",
    key: "tags",
    align: "center",
  },
];

const data = [
  {
    id: "1",
    name: "黑色签字笔",
    number: "hasd",
    type: "办公用品",
    brand: "得力",
    model: "gel16.04/0.5",
    Company: "只",
    current: 100,
    StorageQuantity: 100,
    price: "1",
    Buyer: "黄哲",
    tags: 100,
  },
  {
    id: "2",
    name: "黑色签字笔",
    number: "hasd",
    type: "办公用品",
    brand: "得力",
    model: "gel16.04/0.5",
    Company: "只",
    current: 50,
    StorageQuantity: 100,
    price: "2",
    Buyer: "黄哲",
    tags: 200,
  },
  {
    id: "3",
    name: "黑色签字笔",
    number: "hasd",
    type: "办公用品",
    brand: "得力",
    model: "gel16.04/0.5",
    Company: "只",
    current: 50,
    StorageQuantity: 100,
    price: "5",
    Buyer: "黄哲",
    tags: 500,
  },
];

const onSearch = (value) => console.log(value);
// const { RangePicker } = DatePicker;
// import connect from './connect'
// @connect
class index extends Component {
  constructor() {
    super();

    function onChange(value) {
      console.log(`selected ${value}`);
    }

    function onBlur() {
      console.log("blur");
    }

    function onFocus() {
      console.log("focus");
    }

    function onSearch(val) {
      console.log("search:", val);
    }
  }
  render() {
    return (
      <Container>
        <div className='box'>
        <div class="header">
          <div class="hh1">
            <span class="nn">入库单号：</span>
            <b>RK20190923002</b>
          </div>

          <div class="hh1">
            <span class="nn">入库日期：</span>
            <b>2019-05-23 </b>
          </div>

          <div class="hh1">
            <span class="nn">入库仓库：</span>
            <b>本部高中-行政楼1号仓库  </b>
          </div>

          <div class="hh1">
            <span class="nn">入库类型：</span>
            <b>采购入库</b>
          </div>

          <div class="hh1">
            <span class="nn">供应商：</span>
            <b>京东商城</b>
          </div>
        </div>

        <div class="hh3">
          <Table 
          columns={columns} 
          dataSource={data} 
          bordered 
          pagination={false}
          summary={(pageData) => {
            let totalcurrent = 0;
            let totalStorageQuantity = 0;
            let totaltags = 0;

            pageData.forEach(({ current, StorageQuantity, tags }) => {
              totalcurrent += current;
              totalStorageQuantity += StorageQuantity;
              totaltags += tags;
            });

            return (
              <>
                <Table.Summary.Row align="center">
                  <Table.Summary.Cell>合计</Table.Summary.Cell>
                  <Table.Summary.Cell></Table.Summary.Cell>
                  <Table.Summary.Cell></Table.Summary.Cell>
                  <Table.Summary.Cell></Table.Summary.Cell>
                  <Table.Summary.Cell></Table.Summary.Cell>
                  <Table.Summary.Cell></Table.Summary.Cell>
                  <Table.Summary.Cell></Table.Summary.Cell>

                  <Table.Summary.Cell>
                    <Text>{totalcurrent}</Text>
                  </Table.Summary.Cell>
                  <Table.Summary.Cell>
                    <Text>{totalStorageQuantity}</Text>
                  </Table.Summary.Cell>
                  <Table.Summary.Cell></Table.Summary.Cell>
                  <Table.Summary.Cell></Table.Summary.Cell>
                  <Table.Summary.Cell colSpan={2}>
                    <Text>{totaltags}</Text>
                  </Table.Summary.Cell>
                </Table.Summary.Row>
              </>
            );
          }}
          />
        </div>

        <div class="hh4">
          <span>制单人：</span>
          <span>黄哲</span>
          <span>制单日期：</span>
          <span>{moment().format("YYYY-MM-DD")}</span>
        </div>
        <div class="clear"></div>
        <div class="hh5">
          <span>备注：</span>
          <textarea name="" id="" cols="100" rows="5"></textarea>
        </div>
        <div class="clear"></div>
        {/* <div class="hh6">
          <span>
            <Button type="primary">打印</Button>
          </span>
          <span>
            <Button>取消</Button>
          </span>
        </div> */}
        </div>
      </Container>
    );
  }
}

export default index;
